<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>跑团认证资料上传</title>
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/base.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/mod.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/list.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="{$staticHost}/static/css/page.css" />

		<script src="{$staticHost}/static/js/jquery-1.8.3.min.js"></script>
		<script src="{$staticHost}/static/js/js.js"></script>
		<script src="{$staticHost}/static/js/pace.js"></script>

	</head>
	<body>
		<!-- <div class="load-ios"></div>
		<div class="load "><span></span></div> -->
		<section id="text-box" class="w640 pb50"></section>
		<script id="test" type="text/html">
			<form id="infoForm" enctype="multipart/form-data" method="post" action="{$staticHost}/show/auth" >
				<article class="img-60 line-gray-bottom">
					<% if (header.length>0){%>
					<img src=<%=header%> >
					<%}%>
					<% if (header.length==0){%>
					<img src="{$staticHost}/static/images/bg/group_image_nor-min.png">
					<%}%>

					<div>
						<h6><%=name%></h6>
						 ID:<%=gid%>
					</div>
				</article>
				<ul class="input_list line-gray-bottom">
					<li>
						<span>认证方式</span>
						<input id="info" value="<%=info%>" type="text" name="info" placeholder=" 请输入群组曾经参加的马拉松活动名称" />
					</li>
					<li class="bg_gray_light">
						申请人资料填写
					</li>
					<li>
						<span>真实姓名</span>
						<input id="name" name="name" type="text" value="<%=realname %>" placeholder=" 请填写您的真实姓名" />
					</li>
					<li>
						<span>手机号码</span>
						<input id="mobile" value="<%=phone%>" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" type="text" name="phone" placeholder=" 请填写您的手机号" />
					</li>
					<li>
						<span>身份证号</span>
						<input id="card" value="<%=card%>" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="card" type="text" placeholder="请填写您的身份证号" value=""/>
					</li>
				</ul>
				
				<div class="up-img line-gray-bottom">
					<h6>证件照 <small>证件仅作为认证资质</small></h6>
					<ul id="card_img">
						<li id="card_01"></li>
						<li id="card_02"></li>
						<li><a class="up-btn" href="joggers://upImg/{$oid}" id="card-img" >+</a></li>
					</ul>
				</div>

				<input type="hidden" name="gid" value="<%=gid%>"/>
				<input type="hidden" name="oid" value="{$oid}"/>
				<input type="submit" value="提交申请" class="btn-bottom"/>
			</form>
		</script>
<script>
function onJsAndroid(mycard){
	var data = eval('('+mycard+')');
	var imgs = '';
	var imgl = data.length;
	var dlbtn = $("#card_01 img").length;
	var dlbtn1 = $("#card_02 img").length;

	if(dlbtn == 0 || dlbtn1 == 0){
		if(imgl==1){
			$("#card_img li").eq(dlbtn == 0 ? 0 : 1).html('<img src="' + data[0] + '" alt="" /><a class="dl' + (dlbtn == 0 ? '' : 'l') + '" href="joggers://deImg/0">×</a>');
		} else if(imgl==2){
			$("#card_01").html('<img src="' + data[0] + '" alt="" /><a class="dl" href="joggers://deImg/0">×</a>');
			$("#card_02").html('<img src="' + data[1] + '" alt="" /><a class="dll" href="joggers://deImg/1">×</a>');
		}
	}

    dlbtn = $("#card_01 img").length;
    dlbtn1 = $("#card_02 img").length;
	if(dlbtn==1&&dlbtn1==1){
		$(".up-btn").css('display','none');
	}
	
	$(".dl").click(function(){
		$("#card_01 img").remove();
		$("#card_01 a").remove();
		$(".up-btn").css('display','inline-block');
	});

	$(".dll").click(function(){
		$("#card_02 img").remove();
		$("#card_02 a").remove();
		$(".up-btn").css('display','inline-block');
	})
}

var gid = getQueryStringByName('gid');

$(function(){

	$.getJSON('{$staticHost}/groupWeb/authDetail',{gid:gid }, function(data, error) {
		data.gid=gid;
		var html = template('test', data);
		document.getElementById('text-box').innerHTML = html;
		function txtVal(){
			var textLen = $("input[type=text]").val().length
		 		if(textLen>0){
		 			$('.btn-bottom').css('color','#3BB8D9');
		 		}else{
		 			$('.btn-bottom').css('color','#ADADB3');
		 		}
		}
		$('#infoForm').on('submit', function() {
			var checked = true;
			var mobileReg = /^(13[0-9]|15[0-9]|18[0-9]|14[57])[0-9]{8,8}$/;
			var cardReg = /(^\d{15,15}$)|(^\d{18,18}$)|(^\d{17,17}(\d|X|x)$)/;
			var info = $.trim($('#info').val());
			var name = $.trim($('#name').val());
			var mobile = $.trim($('#mobile').val());
			var card = $.trim($('#card').val());
			var imgNull = $("card_02").html;
			if(info == '') {
				checked = false;
				
				$('#info').css('color','red');
				$('.btn-bottom').css('color','#ADADB3');
			} else if(name == '') {
				checked = false;
				
				$('#name').css('color','red');
				
			}else if(mobile == '' || mobile.length != 11 || !mobileReg.test(mobile)) {
				
				console.info( mobile.length);
				checked = false;
				
				$('#mobile').css('color','red');
				$('.btn-bottom').css('color','#ADADB3');
				
			}else if(card == '' || !cardReg.test(card)) {
				checked = false;
				
				$('#card').css('color','red');
				$('.btn-bottom').css('color','#ADADB3');
			}else if(imgNull.length==undefined) {
				checked = false;
				
				$('#card_02').css('border-color','red');
				
			}
			else{
				$('.btn-bottom').css('color','#3BB8D9');
			}

			return checked;
		});

		
	/**验证***/
	});
});
/***渲染页面***/


function getQueryString() {
var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+", "g"));
for (var i = 0; i < result.length; i++) {
    result[i] = result[i].substring(1);
    };
    return result;
};
//根据QueryString参数名称获取值
function getQueryStringByName(name) {
    var result = location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
    if (result == null || result.length < 1) {
        return "";
    };
    return result[1];
};
//根据QueryString参数索引获取值
function getQueryStringByIndex(index) {
    if (index == null) {
        return "";
    };
    var queryStringList = getQueryString();
    if (index >= queryStringList.length) {
        return "";
    };
    var result = queryStringList[index];
    var startIndex = result.indexOf("=") + 1;
    result = result.substring(startIndex);
    return result;
};
</script>
<!--渲染页面  获取数据-->

<script type="text/javascript">

	var browser = {
	versions: function() {
	var u = navigator.userAgent, app = navigator.appVersion;
	return {//移动终端浏览器版本信息 
	trident: u.indexOf('Trident') > -1, //IE内核
	presto: u.indexOf('Presto') > -1, //opera内核
	webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
	ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
	iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
	iPad: u.indexOf('iPad') > -1, //是否iPad
	webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
	};
	}(),
	language: (navigator.browserLanguage || navigator.language).toLowerCase()
	}
	 
	if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
		$(".load-ios").css('display','block')
		window.onload=function(){
		$(document).ready(function() { 
				$("#info").focus()
		 		$(".load-ios").css('display','none')
				$(':text').focus(function(){
					$(this).css('color','#adadb3');

				});
			}); 
		};
	}else if (browser.versions.android) {
	$(".load").css('display','block')
		window.onload=function(){
			$(document).ready(function() { 
				$("#info").focus()
		 		$(".load").css('display','none')
		 		$(':text').focus(function(){
					$(this).css('color','#adadb3');
				});
			}); 
		};
	}	
</script>

</body>
{template 'show/web-footer'}
